/* ========================================================================== */
/*  General Resets and Fixes                                                  */
/* ========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-weight: inherit;font-style: inherit;font-size: 100%;font-family: inherit;vertical-align: top;}
:focus {outline: 0; -moz-outline-style: none;}
ol, ul {list-style: none;}
table {border-collapse: separate;	border-spacing: 0; }
th, td {text-align: left;	font-weight: normal; }


/*  General & Helper Styles
----------------------------------------------------------*/
@font-face {
    font-family: 'digital-7mono';
    src: url('../fonts/digital-7_mono-webfont.eot');
    src: url('../fonts/digital-7_mono-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/digital-7_mono-webfont.woff') format('woff'),
         url('../fonts/digital-7_mono-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {font-family: arial, helvetica, sans-serif;font-size:14px; color: #444444; background: #252525 url('../images/bg.gif') repeat; margin:0; padding:10px;}
a {}
a:hover {}
a:focus, div:focus {outline:none; -moz-outline-style: none;}
img {}
p {}
ul {}
ol {}

.clear {clear: both}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { display: inline-table; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

.left { float: left; }
.right { float: right; }
.center { text-align: center; }
.hide { display: none;}

device {display:block; padding: 20px; width:360px;  margin:0px auto; border-radius: 5px; background:#d2d2d2 url('../images/device-bg.jpg') repeat-y;  box-shadow: inset -1px -1px 2px #252525, 0 0 10px rgba(0, 0, 0, 0.9);}
logo {display:block; height:40px; width:100%; background:url('../images/logo.png') no-repeat center; opacity:0.5; margin-bottom:20px; }

/*  Screen
----------------------------------------------------------*/
screen {
    display:block; 
    position:relative;
    height:240px; 
    width:100%; 
    margin-bottom:20px; 
    border-radius:4px; 
    box-shadow: 1px 1px 0px #fff, inset 0 0 2px rgba(0, 0, 0, 0.2);
    border:1px solid rgba(172, 172, 172, 0.9); 
    background:#f0f0f0;
    color:#161616;
    background-image: linear-gradient(bottom, rgb(248,248,248) 36%, rgb(230,230,230) 100%);
    background-image: -o-linear-gradient(bottom, rgb(248,248,248) 36%, rgb(230,230,230) 100%);
    background-image: -moz-linear-gradient(bottom, rgb(248,248,248) 36%, rgb(230,230,230) 100%);
    background-image: -webkit-linear-gradient(bottom, rgb(248,248,248) 36%, rgb(230,230,230) 100%);
    background-image: -ms-linear-gradient(bottom, rgb(248,248,248) 36%, rgb(230,230,230) 100%);
    background-image: -webkit-gradient(linear, left bottom,left top, color-stop(0.36, rgb(248,248,248)),color-stop(1, rgb(230,230,230)));
}

screen temperature {display:block; position: absolute; top:20px; right:100px; text-align:right; font-size:160px; line-height:160px; font-family: digital-7mono; }
    screen tempunit {display:block; position: absolute; top:45px; right:30px; font-family:Tahoma; font-size:60px; line-height:60px; }
		screen tempunit.off { opacity:0.1;}
    screen time {display:block;  position: absolute; top:180px; right:105px; text-align:right; line-height:40px; font-size:40px; font-family: digital-7mono; text-transform:uppercase;}
    screen date {display:block;  position: absolute; top:198px; right:30px; text-align:right; font-size:14px; font-family: Tahoma; text-transform:uppercase; }
    screen systemmode {display:block;  position: absolute; top:185px; left:20px; width:25px; height:25px; background:url('../images/screen-icons.png') no-repeat 0 -25px;}
        screen systemmode.off { opacity:0.1;}
    screen nightmode {display:block;  position: absolute; top:20px; left:20px; width:25px; height:25px; background:url('../images/screen-icons.png') no-repeat;}
        screen nightmode.off { opacity:0.1;}

/*  Blocks
----------------------------------------------------------*/
block {margin:0 0 20px; color:#4d4b4b; display:block;}
block:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    block h2 {font-family:Tahoma; font-weight:bold; text-transform:uppercase; font-size:16px; letter-spacing:1px; margin:0 0 5px;}
    block button { 
        font-family:Tahoma; font-weight:bold; text-transform:uppercase; font-size:16px; color:#4d4b4b;
        border-radius:4px; 
        border:1px solid rgba(172, 172, 172, 0.9); 
        cursor:pointer;
        box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
        background-image: linear-gradient(top, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -o-linear-gradient(top, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -moz-linear-gradient(top, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -webkit-linear-gradient(top, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -ms-linear-gradient(top, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, rgb(236,236,236)),color-stop(1, rgb(209,209,209)));
    }
    block button.set { 
        box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
        background-image: linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
        background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(236,236,236)),color-stop(1, rgb(209,209,209)));
    }    

/*  Blocks - Temperature
----------------------------------------------------------*/
    block.temperature .buttons button {width:48%; height:75px;}
        block.temperature .buttons button symbol { display:block;width:45px; height:30px; margin:auto; opacity:0.8; }
        block.temperature .buttons button:hover symbol {opacity:1;}
   block.temperature .buttons button:active  {
					  box-shadow: inset -2px -2px 2px rgba(0, 0, 0, 0.1);
					   background-image: linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
					   background-image: -o-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
					   background-image: -moz-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
					   background-image: -webkit-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
					   background-image: -ms-linear-gradient(bottom, rgb(236,236,236) 0%, rgb(209,209,209) 100%);
					   background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(236,236,236)),color-stop(1, rgb(209,209,209)));  
  }    
    block.temperature .buttons button.up {float:left;}
        block.temperature .buttons button.up symbol {background:url('../images/temp-buttons.png') no-repeat;}
    block.temperature .buttons button.down {float:right;}
        block.temperature .buttons button.down symbol {background:url('../images/temp-buttons.png') no-repeat -191px;}
    
/*  Blocks - Other
----------------------------------------------------------*/
    block .button-set {}
        block .button-set:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
    block .button-set button {height: 60px; width: 50%; float:left; border-radius:0px; border-left-width:0px;  }
        block .button-set button:first-child { border-radius:4px 0 0 4px; border-left-width:1px;}
        block .button-set button:last-child { border-radius:0px 4px 4px 0; border-right-width:1px;}


    block.system-mode button symbol {display:block; height:40px; width:30px; margin:auto; }
    block.system-mode button.home symbol { background: url('../images/system-mode-buttons.png') no-repeat; }
    block.system-mode button.away symbol { background: url('../images/system-mode-buttons.png') no-repeat -175px; }
    
        

/*  Media Settings
----------------------------------------------------------*/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
    body {padding:0px;}
    device {padding:5px 10px 3px 9px; width:90%; height:100%; max-width:360px; margin:5px auto 0 auto;}
    logo {margin-bottom:5px;}
    screen {height:160px;margin-bottom:10px;}
        screen temperature {font-size:120px;line-height:120px; top:10px; right:80px;}
        screen tempunit {top:20px;font-size:30px; line-height:30px; right:30px;}
        screen time {top:120px; right:85px; line-height:30px; font-size:30px; }
        screen date {position: absolute; top:133px; right:20px; font-size:11px; }
        screen systemmode {top:120px;}

    block {margin-bottom:10px;}
        block h2 {font-size:14px;}
        block.temperature .buttons button {height:45px; }
        block .button-set button {height:50px}
}